<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>云邮蜂巢 - 品质生活</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        }
        
        body {
            background-color: #fff9f2;
            color: #5a3e36;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        .header {
            background-color: #ff6b00;
            height: 80px;
            display: flex;
            align-items: center;
            padding: 0 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
            position: relative;
            z-index: 100;
            flex-shrink: 0;
        }
        
        .logo {
            color: white;
            font-size: 26px;
            font-weight: bold;
            margin-right: 30px;
            letter-spacing: 1px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
        }
        
        .user-info {
            display: flex;
            align-items: center;
            margin-right: 30px;
        }
        
        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: white;
            margin-right: 10px;
            overflow: hidden;
            border: 2px solid #fed7aa;
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .username {
            color: white;
            font-size: 14px;
            font-weight: 500;
        }
        
        .search-bar {
            flex: 1;
            max-width: 600px;
            position: relative;
        }
        
        .search-bar input {
            width: 100%;
            height: 40px;
            border: none;
            border-radius: 20px;
            padding: 0 20px;
            font-size: 14px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .search-bar button {
            position: absolute;
            right: 5px;
            top: 5px;
            height: 30px;
            padding: 0 15px;
            background-color: #ff6b00;
            color: white;
            border: none;
            border-radius: 15px;
            cursor: pointer;
        }
        
        .nav {
            display: flex;
            margin-left: 30px;
        }
        
        .nav-item {
            color: white;
            margin-right: 20px;
            font-size: 14px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .nav-item:hover {
            background-color: rgba(255,255,255,0.2);
        }
        
        .promo-tags {
            display: flex;
            margin-left: 20px;
        }
        
        .promo-tag {
            background-color: rgba(255,255,255,0.2);
            color: white;
            padding: 4px 10px;
            border-radius: 4px;
            font-size: 12px;
            margin-right: 10px;
        }
        
        .ai-toggle {
            display: flex;
            align-items: center;
            color: white;
            margin-left: 20px;
            cursor: pointer;
            padding: 8px 12px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .ai-toggle:hover {
            background-color: rgba(255,255,255,0.2);
        }
        
        .ai-toggle svg {
            margin-right: 5px;
            width: 20px;
            height: 20px;
        }
        
        .main-container {
            flex: 1;
            display: flex;
            width: 100%;
            max-width: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
        }
        
        .content-wrapper {
            flex: 1;
            display: flex;
            flex-direction: column;
            min-width: 0;
            padding: 20px;
            transition: all 0.3s;
        }
        
        .ai-closed .content-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            width: 100%;
            padding: 20px;
        }
        
        .hero-banner {
            background: linear-gradient(135deg, #ff6b00, #ff9a00);
            height: 200px;
            border-radius: 0;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 32px;
            font-weight: bold;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        
        .content-section {
            display: flex;
            gap: 20px;
            height: calc(100% - 220px);
            width: 100%;
        }
        
        .sidebar {
            width: 220px;
            background-color: white;
            border-radius: 0;
            padding: 15px;
            box-shadow: none;
            border: none;
            height: 100%;
            overflow-y: auto;
        }
        
        .category-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #ea580c;
            padding-bottom: 8px;
            border-bottom: 1px solid #ffedd5;
        }
        
        .category-item {
            padding: 10px 0;
            cursor: pointer;
            border-bottom: 1px solid #ffedd5;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .category-item:before {
            content: "•";
            color: #f97316;
            margin-right: 8px;
            font-size: 18px;
            line-height: 0;
        }
        
        .category-item:hover {
            color: #f97316;
        }
        
        .main-content {
            flex: 1;
            height: 100%;
            overflow-y: auto;
        }
        
        .deals-section {
            background-color: white;
            border-radius: 0;
            padding: 15px;
            margin-bottom: 20px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border: none;
        }
        
        .section-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 15px;
            color: #7c2d12;
            display: flex;
            align-items: center;
        }
        
        .section-title:after {
            content: "";
            flex: 1;
            height: 1px;
            background-color: #ffedd5;
            margin-left: 15px;
        }
        
        .product-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 15px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            border: 1px solid #ffedd5;
        }
        
        .product-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .product-image {
            height: 160px;
            background-color: #fff7ed;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #d6d3d1;
            position: relative;
            overflow: hidden;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .product-info {
            padding: 12px;
        }
        
        .product-title {
            font-size: 13px;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            color: #5a3e36;
            line-height: 1.4;
        }
        
        .product-price {
            color: #dc2626;
            font-weight: bold;
            font-size: 16px;
        }
        
        .product-original-price {
            color: #a8a29e;
            font-size: 12px;
            text-decoration: line-through;
            margin-left: 5px;
        }
        
        .tag {
            display: inline-block;
            background-color: #ffedd5;
            color: #ea580c;
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            margin-top: 5px;
        }
        
        .sidebar-widget {
            background-color: white;
            border-radius: 0;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: none;
            border: none;
        }
        
        .widget-title {
            font-size: 15px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #ea580c;
        }
        
        .promo-banner {
            background: linear-gradient(135deg, #fb923c, #fbbf24);
            height: 100px;
            border-radius: 0;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-align: center;
            padding: 0 20px;
            font-size: 16px;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
            width: 100%;
        }
        
        /* AI购物助手样式 - 彩色动态版本 */
        .ai-assistant {
            width: 350px;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
            height: calc(100vh - 80px);
            display: flex;
            flex-direction: column;
            border-left: 1px solid #eee;
            flex-shrink: 0;
        }
        
        .ai-header {
            background: linear-gradient(135deg, #ff00cc, #3333ff, #00ccff);
            background-size: 200% 200%;
            animation: gradientBG 8s ease infinite;
            color: white;
            padding: 15px;
            display: flex;
            align-items: center;
        }
        
        @keyframes gradientBG {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .ai-title {
            font-size: 16px;
            font-weight: bold;
            margin-left: 10px;
            animation: rainbow 8s linear infinite;
        }
        
        @keyframes rainbow {
            0% { color: #ff0000; }
            14% { color: #ff7f00; }
            28% { color: #ffff00; }
            42% { color: #00ff00; }
            57% { color: #0000ff; }
            71% { color: #4b0082; }
            85% { color: #9400d3; }
            100% { color: #ff0000; }
        }
        
        .ai-close {
            margin-left: auto;
            cursor: pointer;
            font-size: 20px;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: background-color 0.2s;
        }
        
        .ai-close:hover {
            background-color: rgba(255,255,255,0.2);
        }
        
        .ai-body {
            flex: 1;
            padding: 15px;
            overflow-y: auto;
            background-color: #f8f9fa;
        }
        
        .ai-message {
            margin-bottom: 15px;
            max-width: 80%;
            font-size: 14px;
            line-height: 1.5;
            position: relative;
            transition: all 0.3s;
        }
        
        .ai-message.bot {
            align-self: flex-start;
            background-color: white;
            padding: 10px 15px;
            border-radius: 0 12px 12px 12px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            border-left: 4px solid #ff00cc;
        }
        
        .ai-message.user {
            align-self: flex-end;
            background: linear-gradient(135deg, #ff00cc, #3333ff);
            color: white;
            padding: 10px 15px;
            border-radius: 12px 0 12px 12px;
            margin-left: auto;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .ai-input {
            display: flex;
            padding: 10px;
            border-top: 1px solid #eee;
            background-color: white;
        }
        
        .ai-input input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 20px;
            outline: none;
            font-size: 14px;
            transition: all 0.3s;
        }
        
        .ai-input input:focus {
            border-color: #ff00cc;
            box-shadow: 0 0 0 2px rgba(255, 0, 204, 0.2);
        }
        
        .ai-input button {
            margin-left: 10px;
            padding: 0 15px;
            background: linear-gradient(135deg, #ff00cc, #3333ff);
            color: white;
            border: none;
            border-radius: 20px;
            cursor: pointer;
            height: 36px;
            font-size: 14px;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        
        .ai-input button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        }
        
        .recommend-product {
            display: flex;
            margin-bottom: 15px;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
            border: 1px solid #eee;
        }
        
        .recommend-product:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            border-color: #ff00cc;
        }
        
        .recommend-image {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #ffcc00, #ff00cc);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            position: relative;
            flex-shrink: 0;
            font-weight: bold;
            overflow: hidden;
        }
        
        .recommend-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .recommend-info {
            padding: 10px;
            flex: 1;
        }
        
        .recommend-title {
            font-size: 13px;
            margin-bottom: 5px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .recommend-price {
            color: #ff3333;
            font-weight: bold;
            font-size: 14px;
        }
        
        .recommend-original-price {
            color: #a8a29e;
            font-size: 11px;
            text-decoration: line-through;
            margin-left: 5px;
        }
        
        .recommend-tag {
            display: inline-block;
            background: linear-gradient(135deg, #00ccff, #0099ff);
            color: white;
            font-size: 10px;
            padding: 2px 8px;
            border-radius: 10px;
            margin-top: 3px;
        }
        
        .quick-question {
            display: inline-block;
            background: linear-gradient(135deg, #ffcc00, #ff9900);
            color: white;
            padding: 8px 12px;
            border-radius: 20px;
            margin: 5px;
            font-size: 13px;
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: all 0.3s;
            border: none;
        }
        
        .quick-question:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            background: linear-gradient(135deg, #ff9900, #ff6600);
        }
        
        /* 深度思考按钮样式 */
        .deep-think-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: linear-gradient(135deg, #4b6cb7, #182848);
            color: white;
            border: none;
            border-radius: 50px;
            padding: 12px 24px;
            font-size: 14px;
            cursor: pointer;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
            z-index: 1000;
            display: flex;
            align-items: center;
            transition: all 0.3s;
        }
        
        .deep-think-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }
        
        .deep-think-btn.active {
            background: linear-gradient(135deg, #182848, #4b6cb7);
        }
        
        .deep-think-btn svg {
            margin-right: 8px;
            width: 18px;
            height: 18px;
        }
        
        /* 思考动画样式 */
        .thinking-dots span {
            opacity: 0.3;
            transition: opacity 0.3s;
        }
        
        /* 响应式设计 */
        @media (max-width: 1200px) {
            .main-container {
                flex-direction: column;
            }
            
            .content-wrapper {
                width: 100%;
                padding: 15px;
            }
            
            .ai-assistant {
                width: 100%;
                height: auto;
                max-height: 400px;
                border-left: none;
                border-top: 1px solid #eee;
            }
            
            .hero-banner {
                border-radius: 0;
            }
            
            .ai-closed .content-wrapper {
                max-width: 100%;
                padding: 15px;
            }
            
            .header {
                flex-wrap: wrap;
                height: auto;
                padding: 10px;
            }
            
            .logo {
                width: 100%;
                margin-bottom: 10px;
            }
            
            .user-info {
                margin-right: 15px;
            }
            
            .search-bar {
                order: 1;
                margin-top: 10px;
                max-width: 100%;
            }
            
            .nav {
                display: none;
            }
            
            .promo-tags {
                display: none;
            }
            
            .ai-toggle {
                margin-left: 15px;
            }
            
            .deep-think-btn {
                right: 15px;
                bottom: 15px;
            }
        }
        
        @media (max-width: 768px) {
            .content-section {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                margin-bottom: 20px;
                height: auto;
            }
        }
        
        @media (max-width: 480px) {
            .hero-banner {
                font-size: 24px;
                height: 150px;
            }
            
            .product-grid {
                grid-template-columns: 1fr;
            }
            
           /* 新的深度思考按钮样式 */
.ai-header .deep-think-btn {
    margin-left: auto;
    margin-right: 15px;
    background: linear-gradient(135deg, #4b6cb7, #182848);
    color: white;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    transition: all 0.3s;
    height: 30px;
}

.ai-header .deep-think-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.ai-header .deep-think-btn.active {
    background: linear-gradient(135deg, #182848, #4b6cb7);
}

.ai-header .deep-think-btn svg {
    margin-right: 5px;
    width: 14px;
    height: 14px;
}
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="header">
        <div class="logo">云邮蜂巢</div>
        
        <div class="user-info">
            <div class="avatar" onclick="window.location.href='upadte.html'">
             <img src="https://via.placeholder.com/40" alt="用户头像">
            </div>
            <div class="username">欢迎登录</div>
        </div>
        
        <div class="search-bar">
            <input type="text" placeholder="搜索商品...">
            <button>搜索</button>
        </div>
        
        <div class="ai-toggle" id="aiToggle">
            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M12 8V4H8"></path>
                <rect x="4" y="4" width="16" height="16" rx="2"></rect>
                <path d="M2 14h2"></path>
                <path d="M20 14h2"></path>
                <path d="M15 13v2"></path>
                <path d="M9 13v2"></path>
            </svg>
            <span>AI助手</span>
        </div>
        
        <div class="nav">
            <div class="nav-item">首页</div>
            <div class="nav-item">今日购物</div>
            <div class="nav-item">品牌专区</div>
            <div class="nav-item">企业采购</div>
            <div class="nav-item">我的订单</div>
        </div>
        
        <div class="promo-tags">
            <div class="promo-tag">满50减20</div>
            <div class="promo-tag">限时抢购</div>
            <div class="promo-tag">超68周年庆</div>
        </div>
    </div>
    
    <!-- 主要内容区 -->
    <div class="main-container" id="mainContainer">
        <!-- 左侧内容区 -->
        <div class="content-wrapper">
            <div class="hero-banner">
            <div><img src="新建文件夹/mifeng.gif" style="position: relative; left: -400px; width: 370px; height: 300px;"></div>
            <div style="color: yellow;position: relative; left: -250px;font-size: larger;">云邮蜂巢</div>
    </div>
            
            <div class="content-section">
                <!-- 左侧边栏 -->
                <div class="sidebar">
                    <div class="category-title">商品分类</div>
                    <div class="category-item">电脑/办公</div>
                    <div class="category-item">手机/数码</div>
                    <div class="category-item">家用电器</div>
                    <div class="category-item">食品生鲜</div>
                    <div class="category-item">美妆个护</div>
                    <div class="category-item">服饰鞋包</div>
                    <div class="category-item">家居生活</div>
                    <div class="category-item">运动户外</div>
                    <div class="category-item">母婴玩具</div>
                    <div class="category-item">图书音像</div>
                    
                    <div class="sidebar-widget" style="margin-top: 20px;">
                        <div class="widget-title">热门活动</div>
                        <div class="promo-banner">
                            热卖分析<br>限时抢购
                        </div>
                    </div>
                </div>
                
                <!-- 主内容区 -->
                <div class="main-content">
                    <div class="deals-section">
                        <div class="section-title">为您推荐</div>
                        <div class="product-grid">
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img12.360buyimg.com/n5/s720x720_jfs/t1/210662/1/41308/118750/6639bd39F454de4bc/fc0c3d4f81f7139a.jpg" alt="红白配色十字绣套装">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">红白配色十字绣套装</div>
                                    <div>
                                        <span class="product-price">¥25.8</span>
                                        <span class="product-original-price">¥39</span>
                                    </div>
                                    <span class="tag">联名款</span>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img14.360buyimg.com/n5/s114x114_jfs/t1/167948/18/29586/65821/64fed19dF477c15be/0189584716855fd2.jpg" alt="可机洗有机棉混纺T恤">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">可机洗有机棉混纺T恤</div>
                                    <div>
                                        <span class="product-price">¥129</span>
                                        <span class="product-original-price">¥499</span>
                                    </div>
                                    <span class="tag">联名款</span>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img11.360buyimg.com/n5/s720x720_jfs/t1/234781/18/37404/91582/67760331F64152aa2/4da2ff07d6492b29.png" alt="可机洗有机棉奶垫">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">可机洗有机棉奶垫</div>
                                    <div>
                                        <span class="product-price">¥59.9</span>
                                        <span class="product-original-price">¥79</span>
                                    </div>
                                    <span class="tag">新品</span>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img13.360buyimg.com/n5/s720x720_jfs/t1/45115/15/25210/69270/66a89ab2F41901c77/74b495a1809995d0.jpg" alt="洗碗机专用清洁剂">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">洗碗机专用清洁剂</div>
                                    <div>
                                        <span class="product-price">¥39.9</span>
                                        <span class="product-original-price">¥59</span>
                                    </div>
                                    <span class="tag">热销</span>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img10.360buyimg.com/n5/s720x720_jfs/t1/261637/2/11948/28010/67860fdeF95203119/829db96808e323ec.jpg" alt="便携式折叠太阳伞">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">便携式折叠太阳伞</div>
                                    <div>
                                        <span class="product-price">¥59</span>
                                        <span class="product-original-price">¥89</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img13.360buyimg.com/n5/s720x720_jfs/t1/123724/28/27748/122842/6264e79cEae8f45ed/64d74c6baf34485e.jpg" alt="北欧风陶瓷马克杯">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">北欧风陶瓷马克杯</div>
                                    <div>
                                        <span class="product-price">¥45</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="deals-section">
                        <div class="section-title">猜你喜欢</div>
                        <div class="product-grid">
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img13.360buyimg.com/n5/s720x720_jfs/t1/99752/32/51865/56885/66ed5ca3Fe0787b05/2f5e06ad0b7835e7.jpg" alt="无线蓝牙耳机">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">无线蓝牙耳机</div>
                                    <div>
                                        <span class="product-price">¥199</span>
                                        <span class="product-original-price">¥299</span>
                                    </div>
                                    <span class="tag">爆款</span>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img13.360buyimg.com/n5/s114x114_jfs/t1/235661/40/23241/53040/66cbe3cfFd10e75a0/e77fe0ad1a9b666b.jpg" alt="防尘手套三双装">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">防尘手套三双装</div>
                                    <div>
                                        <span class="product-price">¥19.9</span>
                                        <span class="product-original-price">¥29</span>
                                    </div>
                                    <span class="tag">限时特惠</span>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img10.360buyimg.com/n5/s720x720_jfs/t1/298001/17/7013/95957/682410c8F84933337/4dec4aa212dfb020.jpg" alt="智能手环">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">智能手环</div>
                                    <div>
                                        <span class="product-price">¥159</span>
                                        <span class="product-original-price">¥199</span>
                                    </div>
                                    <span class="tag">新品</span>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img11.360buyimg.com/n5/s720x720_jfs/t1/240795/31/16345/66854/66bc2aecF5190bbca/ebf9932a30076214.jpg" alt="无线充电器">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">无线充电器</div>
                                    <div>
                                        <span class="product-price">¥69</span>
                                        <span class="product-original-price">¥99</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img12.360buyimg.com/n5/s720x720_jfs/t1/273908/4/2507/80858/67d2a6c9F1925c01d/f7d15509c1156180.png" alt="运动水壶">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">运动水壶</div>
                                    <div>
                                        <span class="product-price">¥39</span>
                                        <span class="product-original-price">¥59</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="product-card">
                                <div class="product-image">
                                    <img src="https://img11.360buyimg.com/n5/s720x720_jfs/t1/277817/37/26098/49133/680892c5F82d5892b/51df19424e17a80d.jpg" alt="厨房电子秤">
                                </div>
                                <div class="product-info">
                                    <div class="product-title">厨房电子秤</div>
                                    <div>
                                        <span class="product-price">¥49</span>
                                        <span class="product-original-price">¥79</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧AI购物助手面板 -->
        <div class="ai-assistant" id="aiAssistant">
            <div class="ai-header">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M12 8V4H8"></path>
                    <rect x="4" y="4" width="16" height="16" rx="2"></rect>
                    <path d="M2 14h2"></path>
                    <path d="M20 14h2"></path>
                    <path d="M15 13v2"></path>
                    <path d="M9 13v2"></path>
                </svg>
                <div class="ai-title">云邮蜂巢AI购物助手</div>
                <button class="deep-think-btn" id="deepThinkBtn">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                    深度思考模式
                </button>
                <div class="ai-close" id="aiClose">×</div>
            </div>
            <div class="ai-body" id="aiBody">
                <div class="ai-message bot">
                    亲爱的用户，欢迎来到云邮蜂巢商城！我是您的AI购物助手，很高兴为您服务。
                </div>
                
                <div class="ai-message bot">
                    今日为您推荐以下热销商品：
                </div>
                
                <!-- 推荐商品1 -->
                <div class="recommend-product">
                    <div class="recommend-image">
                        <img src="https://img14.360buyimg.com/n5/s114x114_jfs/t1/167948/18/29586/65821/64fed19dF477c15be/0189584716855fd2.jpg" alt="可机洗有机棉混纺T恤">
                    </div>
                    <div class="recommend-info">
                        <div class="recommend-title">可机洗有机棉混纺T恤</div>
                        <div>
                            <span class="recommend-price">¥129</span>
                            <span class="recommend-original-price">¥499</span>
                        </div>
                        <span class="recommend-tag">联名款</span>
                    </div>
                </div>
                
                <!-- 推荐商品2 -->
                <div class="recommend-product">
                    <div class="recommend-image">
                        <img src="https://img13.360buyimg.com/n5/s720x720_jfs/t1/45115/15/25210/69270/66a89ab2F41901c77/74b495a1809995d0.jpg" alt="洗碗机专用清洁剂">
                    </div>
                    <div class="recommend-info">
                        <div class="recommend-title">洗碗机专用清洁剂</div>
                        <div>
                            <span class="recommend-price">¥39.9</span>
                            <span class="recommend-original-price">¥59</span>
                        </div>
                        <span class="recommend-tag">热销</span>
                    </div>
                </div>
                
                <!-- 推荐商品3 -->
                <div class="recommend-product">
                    <div class="recommend-image">
                        <img src="https://img13.360buyimg.com/n5/s720x720_jfs/t1/99752/32/51865/56885/66ed5ca3Fe0787b05/2f5e06ad0b7835e7.jpg" alt="无线蓝牙耳机">
                    </div>
                    <div class="recommend-info">
                        <div class="recommend-title">无线蓝牙耳机</div>
                        <div>
                            <span class="recommend-price">¥199</span>
                            <span class="recommend-original-price">¥299</span>
                        </div>
                        <span class="recommend-tag">爆款</span>
                    </div>
                </div>
                
                <div class="ai-message bot">
                    您可以直接点击商品查看详情，或者向我提问：
                </div>
                
                <div style="display: flex; flex-wrap: wrap; margin-top: 10px;">
                    <div class="quick-question">端午节礼品推荐</div>
                    <div class="quick-question">夏日降温神器</div>
                    <div class="quick-question">六一儿童节礼物</div>
                    <div class="quick-question">洗碗机哪个品牌好</div>
                    <div class="quick-question">如何查询订单状态</div>
                    <div class="quick-question">最新促销活动</div>
                </div>
            </div>
            <div class="ai-input">
                <input type="text" placeholder="请输入您的问题..." id="aiInput">
                <button id="aiSend">发送</button>
            </div>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const mainContainer = document.getElementById('mainContainer');
        const aiAssistant = document.getElementById('aiAssistant');
        const aiClose = document.getElementById('aiClose');
        const aiToggle = document.getElementById('aiToggle');
        const aiSend = document.getElementById('aiSend');
        const aiInput = document.getElementById('aiInput');
        const aiBody = document.getElementById('aiBody');
        const deepThinkBtn = document.getElementById('deepThinkBtn');
        
        // 深度思考状态
        let isDeepThinking = false;
        let currentEventSource = null;
        
        // 初始化AI助手
        function initAIAssistant() {
            // 默认显示AI助手
            showAIAssistant();
            isDeepThinking = false;
            deepThinkBtn.classList.remove('active');
            deepThinkBtn.innerHTML = `
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                </svg>
                深度思考模式
            `;
            
            // 检查token是否存在
            const token = localStorage.getItem('token');
            if (!token) {
                addMessage("请先登录以使用AI助手", 'bot');
            }
        }
        
        // 显示AI助手
        function showAIAssistant() {
            aiAssistant.style.display = 'flex';
            mainContainer.classList.remove('ai-closed');
        }
        
        // 隐藏AI助手
        function hideAIAssistant() {
            aiAssistant.style.display = 'none';
            mainContainer.classList.add('ai-closed');
        }
        
        // 添加消息到对话界面
        function addMessage(text, sender) {
            const message = document.createElement('div');
            message.className = `ai-message ${sender}`;
            
            if (sender === 'user') {
                message.innerHTML = text;
            } else {
                // 如果是AI回复，保留换行符
                message.innerHTML = text.replace(/\n/g, '<br>');
            }
            
            aiBody.appendChild(message);
            aiBody.scrollTop = aiBody.scrollHeight;
        }
        
        // 显示思考动画
        function showThinkingAnimation() {
            const thinkingMessage = document.createElement('div');
            thinkingMessage.className = 'ai-message bot';
            thinkingMessage.innerHTML = `
                <div style="display: flex; align-items: center;">
                    <div class="thinking-dots">
                        <span>.</span><span>.</span><span>.</span>
                    </div>
                    <span style="margin-left: 10px;">正在思考中</span>
                </div>
            `;
            aiBody.appendChild(thinkingMessage);
            aiBody.scrollTop = aiBody.scrollHeight;
            
            // 模拟动画效果
            const dots = thinkingMessage.querySelectorAll('.thinking-dots span');
            let dotIndex = 0;
            const dotInterval = setInterval(() => {
                dots.forEach(dot => dot.style.opacity = '0.3');
                dots[dotIndex % 3].style.opacity = '1';
                dotIndex++;
            }, 300);
            
            return {
                element: thinkingMessage,
                interval: dotInterval
            };
        }
        
        // 更新深度思考状态到后端
        function updateDeepThinkStatus(isDeep) {
            const token = localStorage.getItem('token');
            if (!token) return;

            fetch("/api/v1/deepseek/think", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                },
                body: JSON.stringify({ 
                    deepThink: !isDeep // false表示启用深度思考，true表示不启用
                })
            })
            .catch(error => console.error('Error:', error));
        }
        
        // 发送消息到AI接口（SSE方式）
        function sendMessageToAI(message) {
            // 从localStorage获取token
            const token = localStorage.getItem('token');
            if (!token) {
                addMessage("请先登录", 'bot');
                return;
            }

            // 创建消息元素并显示"正在思考中..."
            const thinking = showThinkingAnimation();
            
            // 如果已有连接，先关闭
            if (currentEventSource) {
                currentEventSource.close();
            }
            
            // 创建回复消息元素
            const replyMessage = document.createElement('div');
            replyMessage.className = 'ai-message bot';
            aiBody.appendChild(replyMessage);
            
            // 创建SSE连接
            currentEventSource = new EventSource(`/api/v1/deepseek/chat?message=${encodeURIComponent(message)}&deepThink=${!isDeepThinking}&token=${encodeURIComponent(token)}`);
            
            currentEventSource.onmessage = function(e) {
                // 清除动画
                clearInterval(thinking.interval);
                thinking.element.remove();
                
                try {
                    const data = JSON.parse(e.data);
                    if (data.content) {
                        replyMessage.innerHTML += data.content;
                        aiBody.scrollTop = aiBody.scrollHeight;
                    }
                    
                    if (data.finish_reason === 'stop') {
                        currentEventSource.close();
                        currentEventSource = null;
                    }
                } catch (error) {
                    console.error('解析SSE数据出错:', error);
                }
            };
            
            currentEventSource.onerror = function(e) {
                // 清除动画
                clearInterval(thinking.interval);
                thinking.element.remove();
                
                // 关闭连接
                currentEventSource.close();
                currentEventSource = null;
                
                // 显示错误信息
                replyMessage.textContent = "连接出错，请重试";
                aiBody.scrollTop = aiBody.scrollHeight;
                
                console.error('SSE Error:', e);
            };
        }
        
        // 事件监听器
        aiToggle.addEventListener('click', () => {
            aiAssistant.style.display === 'none' ? showAIAssistant() : hideAIAssistant();
        });

        aiClose.addEventListener('click', hideAIAssistant);

        aiSend.addEventListener('click', () => {
            const message = aiInput.value.trim();
            if(message) {
                addMessage(message, 'user');
                aiInput.value = '';
                
                sendMessageToAI(message);
            }
        });

        aiInput.addEventListener('keypress', (e) => {
            if(e.key === 'Enter') {
                aiSend.click();
            }
        });

        // 深度思考按钮点击事件
        deepThinkBtn.addEventListener('click', function() {
            isDeepThinking = !isDeepThinking;
            this.classList.toggle('active');
            
            if(isDeepThinking) {
                this.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                    深度思考中...
                `;
            } else {
                this.innerHTML = `
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
                    </svg>
                    深度思考模式
                `;
            }
            
            // 更新后端状态
            updateDeepThinkStatus(isDeepThinking);
        });
        
        // 快捷问题点击处理
        document.querySelectorAll('.quick-question').forEach(btn => {
            btn.addEventListener('click', function() {
                const question = this.textContent;
                addMessage(question, 'user');
                sendMessageToAI(question);
            });
        });

        // 推荐商品点击处理
        document.querySelectorAll('.recommend-product').forEach(product => {
            product.addEventListener('click', function() {
                const title = this.querySelector('.recommend-title').textContent;
                const price = this.querySelector('.recommend-price').textContent;
                const message = `我想了解 ${title}（${price}）`;
                addMessage(message, 'user');
                sendMessageToAI(message);
            });
        });

        // 商品卡片点击处理
        document.querySelectorAll('.product-card').forEach(card => {
            card.addEventListener('click', function() {
                const title = this.querySelector('.product-title').textContent;
                const price = this.querySelector('.product-price').textContent;
                const message = `我想购买 ${title}（${price}）`;
                addMessage(message, 'user');
                sendMessageToAI(message);
            });
        });

        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', initAIAssistant);
    </script>
</body>
</html>